<template>
  <div class="blue-about-us-news">
    <div class="about-us-news-box">
      <span class="news-cn">新闻动态</span>
      <span class="news-en">NEWS AND TRENDS</span>
      <span class="news-line"></span>

      <div class="about-us-news-con">

        <div class="about-us-news-notice">

          <div class="news-notice-title">
            <span class="notice-new">最新公告</span>
            <span class="notice-more" @click="lookMore(1)">查看更多>></span>
          </div>
          <div class="news-notice-line"></div>

          <div class="news-notice-list">

            <div class="news-notice-item" v-for="(news,i) in newsList1" :key="i" @click="openNewsDetail(news.id)">
              <span class="news-title">{{news.essayName}}</span><span class="news-time">{{news.time | format}}</span>
            </div>

          </div>
        </div>
        <div class="about-us-news-notice">

          <div class="news-notice-title">
            <span class="notice-new">最新动态</span>
            <span class="notice-more" @click="lookMore(2)">查看更多>></span>
          </div>
          <div class="news-notice-line"></div>

          <div class="news-notice-list">

            <div class="news-notice-item" v-for="(news,j) in newsList2" :key="j" @click="openNewsDetail(news.id)">
              <span class="news-title">{{news.essayName}}</span><span class="news-time">{{news.time | format}}</span>
            </div>

          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
  import {baseUrl} from "../config/env";
  import {formatDate} from "../config/util";
  import {clearCache} from "../config/verify";

  export default {
    data() {
      return {
        page: 1,
        size: 8,
        newsList1: [],
        newsList2: []
      }
    },
    created() {
      this.queryNewsList();
    },
    methods: {
      queryNewsList() {
        this.axios.get(baseUrl + "/essay/get_company_dynamic_list?page=" + this.page + "&size=" + this.size + "&labelName=公司公告").then((res) => {
          let retObj = res.data;
          if (retObj.code == 0) {
            if (retObj.data.list != null && retObj.data.list.length > 0) {
              this.newsList1 = retObj.data.list;
            }
          } else {
            this.$message({message: retObj.msg, center: true, type: 'error'});
          }
        });

        this.axios.get(baseUrl + "/essay/get_company_dynamic_list?page=" + this.page + "&size=" + this.size + "&labelName=新闻动态").then((res) => {
          let retObj = res.data;
          if (retObj.code == 0) {
            if (retObj.data.list != null && retObj.data.list.length > 0) {
              this.newsList2 = retObj.data.list;
            }
          } else {
            this.$message({message: retObj.msg, center: true, type: 'error'});
          }
        });
      },
      openNewsDetail(newsId) {
        clearCache();
        window.open("/newsDetail?newsId=" + newsId);
      },
      lookMore(type) {
        clearCache();
        window.open("/news?type=" + type);
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/mixin";

  .blue-about-us-news {
    display: flex;
    justify-content: center;
    .wh(100%, auto);
    background: #FAFAFA;
    .about-us-news-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(1200px, auto);
      .news-cn {
        padding-top: 70px;
        padding-bottom: 9px;
        .size-color(30px, #333333);
      }
      .news-en {
        .size-color(14px, #CCC);
        padding-bottom: 15px;
      }
      .news-line {
        .wh(40px, 4px);
        background: #3CAFFF;
      }
      .about-us-news-con {
        display: flex;
        width: 1200px;
        padding-top: 68px;
        .about-us-news-notice {
          flex: 1;
          &:nth-child(1) {
            margin-right: 80px;
          }
          .news-notice-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            .notice-new {
              .size-color(20px, #47718F)
            }
            .notice-more {
              .size-color(16px, #47718F);
              cursor: pointer;
              &:hover {
                color: #3E637D;
              }
            }
          }
          .news-notice-line {
            .wh(100%, 4px);
            border-top: 1px solid #E0E0E0;
            border-bottom: 1px solid #E0E0E0;
          }
          .news-notice-list {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            .news-notice-item {
              display: flex;
              justify-content: space-between;
              padding-bottom: 22px;
              .news-title {
                .ellipsis(420px);
                .size-color(14px, #4D4D4D);
                &:hover {
                  color: #47718F;
                  cursor: pointer;
                }
              }
              .news-time {
                .size-color(14px, #999999);
              }
            }
          }
        }
      }
    }
  }
</style>
